<html>
  <head>
    <style id="ace-monokai">
      .ace-monokai .ace_gutter {
        background: #2f3129;
        color: #8f908a;
      }
      .ace-monokai .ace_print-margin {
        width: 1px;
        background: #555651;
      }
      .ace-monokai {
        background-color: #272822;
        color: #f8f8f2;
      }
      .ace-monokai .ace_cursor {
        color: #f8f8f0;
      }
      .ace-monokai .ace_marker-layer .ace_selection {
        background: #49483e;
      }
      .ace-monokai.ace_multiselect .ace_selection.ace_start {
        box-shadow: 0 0 3px 0px #272822;
      }
      .ace-monokai .ace_marker-layer .ace_step {
        background: rgb(102, 82, 0);
      }
      .ace-monokai .ace_marker-layer .ace_bracket {
        margin: -1px 0 0 -1px;
        border: 1px solid #49483e;
      }
      .ace-monokai .ace_marker-layer .ace_active-line {
        background: #202020;
      }
      .ace-monokai .ace_gutter-active-line {
        background-color: #272727;
      }
      .ace-monokai .ace_marker-layer .ace_selected-word {
        border: 1px solid #49483e;
      }
      .ace-monokai .ace_invisible {
        color: #52524d;
      }
      .ace-monokai .ace_entity.ace_name.ace_tag,
      .ace-monokai .ace_keyword,
      .ace-monokai .ace_meta.ace_tag,
      .ace-monokai .ace_storage {
        color: #f92672;
      }
      .ace-monokai .ace_punctuation,
      .ace-monokai .ace_punctuation.ace_tag {
        color: #fff;
      }
      .ace-monokai .ace_constant.ace_character,
      .ace-monokai .ace_constant.ace_language,
      .ace-monokai .ace_constant.ace_numeric,
      .ace-monokai .ace_constant.ace_other {
        color: #ae81ff;
      }
      .ace-monokai .ace_invalid {
        color: #f8f8f0;
        background-color: #f92672;
      }
      .ace-monokai .ace_invalid.ace_deprecated {
        color: #f8f8f0;
        background-color: #ae81ff;
      }
      .ace-monokai .ace_support.ace_constant,
      .ace-monokai .ace_support.ace_function {
        color: #66d9ef;
      }
      .ace-monokai .ace_fold {
        background-color: #a6e22e;
        border-color: #f8f8f2;
      }
      .ace-monokai .ace_storage.ace_type,
      .ace-monokai .ace_support.ace_class,
      .ace-monokai .ace_support.ace_type {
        font-style: italic;
        color: #66d9ef;
      }
      .ace-monokai .ace_entity.ace_name.ace_function,
      .ace-monokai .ace_entity.ace_other,
      .ace-monokai .ace_entity.ace_other.ace_attribute-name,
      .ace-monokai .ace_variable {
        color: #a6e22e;
      }
      .ace-monokai .ace_variable.ace_parameter {
        font-style: italic;
        color: #fd971f;
      }
      .ace-monokai .ace_string {
        color: #e6db74;
      }
      .ace-monokai .ace_comment {
        color: #75715e;
      }
      .ace-monokai .ace_indent-guide {
        background: url()
          right repeat-y;
      }
      /*# sourceURL=ace/css/ace-monokai */
    </style>
    <style>
      .error_widget_wrapper {
        background: inherit;
        color: inherit;
        border: none;
      }
      .error_widget {
        border-top: solid 2px;
        border-bottom: solid 2px;
        margin: 5px 0;
        padding: 10px 40px;
        white-space: pre-wrap;
      }
      .error_widget.ace_error,
      .error_widget_arrow.ace_error {
        border-color: #ff5a5a;
      }
      .error_widget.ace_warning,
      .error_widget_arrow.ace_warning {
        border-color: #f1d817;
      }
      .error_widget.ace_info,
      .error_widget_arrow.ace_info {
        border-color: #5a5a5a;
      }
      .error_widget.ace_ok,
      .error_widget_arrow.ace_ok {
        border-color: #5aaa5a;
      }
      .error_widget_arrow {
        position: absolute;
        border: solid 5px;
        border-top-color: transparent !important;
        border-right-color: transparent !important;
        border-left-color: transparent !important;
        top: -5px;
      }
    </style>
    <style id="ace-tm">
      .ace-tm .ace_gutter {
        background: #f0f0f0;
        color: #333;
      }
      .ace-tm .ace_print-margin {
        width: 1px;
        background: #e8e8e8;
      }
      .ace-tm .ace_fold {
        background-color: #6b72e6;
      }
      .ace-tm {
        background-color: #ffffff;
        color: black;
      }
      .ace-tm .ace_cursor {
        color: black;
      }
      .ace-tm .ace_invisible {
        color: rgb(191, 191, 191);
      }
      .ace-tm .ace_storage,
      .ace-tm .ace_keyword {
        color: blue;
      }
      .ace-tm .ace_constant {
        color: rgb(197, 6, 11);
      }
      .ace-tm .ace_constant.ace_buildin {
        color: rgb(88, 72, 246);
      }
      .ace-tm .ace_constant.ace_language {
        color: rgb(88, 92, 246);
      }
      .ace-tm .ace_constant.ace_library {
        color: rgb(6, 150, 14);
      }
      .ace-tm .ace_invalid {
        background-color: rgba(255, 0, 0, 0.1);
        color: red;
      }
      .ace-tm .ace_support.ace_function {
        color: rgb(60, 76, 114);
      }
      .ace-tm .ace_support.ace_constant {
        color: rgb(6, 150, 14);
      }
      .ace-tm .ace_support.ace_type,
      .ace-tm .ace_support.ace_class {
        color: rgb(109, 121, 222);
      }
      .ace-tm .ace_keyword.ace_operator {
        color: rgb(104, 118, 135);
      }
      .ace-tm .ace_string {
        color: rgb(3, 106, 7);
      }
      .ace-tm .ace_comment {
        color: rgb(76, 136, 107);
      }
      .ace-tm .ace_comment.ace_doc {
        color: rgb(0, 102, 255);
      }
      .ace-tm .ace_comment.ace_doc.ace_tag {
        color: rgb(128, 159, 191);
      }
      .ace-tm .ace_constant.ace_numeric {
        color: rgb(0, 0, 205);
      }
      .ace-tm .ace_variable {
        color: rgb(49, 132, 149);
      }
      .ace-tm .ace_xml-pe {
        color: rgb(104, 104, 91);
      }
      .ace-tm .ace_entity.ace_name.ace_function {
        color: #0000a2;
      }
      .ace-tm .ace_heading {
        color: rgb(12, 7, 255);
      }
      .ace-tm .ace_list {
        color: rgb(185, 6, 144);
      }
      .ace-tm .ace_meta.ace_tag {
        color: rgb(0, 22, 142);
      }
      .ace-tm .ace_string.ace_regex {
        color: rgb(255, 0, 0);
      }
      .ace-tm .ace_marker-layer .ace_selection {
        background: rgb(181, 213, 255);
      }
      .ace-tm.ace_multiselect .ace_selection.ace_start {
        box-shadow: 0 0 3px 0px white;
      }
      .ace-tm .ace_marker-layer .ace_step {
        background: rgb(252, 255, 0);
      }
      .ace-tm .ace_marker-layer .ace_stack {
        background: rgb(164, 229, 101);
      }
      .ace-tm .ace_marker-layer .ace_bracket {
        margin: -1px 0 0 -1px;
        border: 1px solid rgb(192, 192, 192);
      }
      .ace-tm .ace_marker-layer .ace_active-line {
        background: rgba(0, 0, 0, 0.07);
      }
      .ace-tm .ace_gutter-active-line {
        background-color: #dcdcdc;
      }
      .ace-tm .ace_marker-layer .ace_selected-word {
        background: rgb(250, 250, 255);
        border: 1px solid rgb(200, 200, 250);
      }
      .ace-tm .ace_indent-guide {
        background: url('')
          right repeat-y;
      }
      /*# sourceURL=ace/css/ace-tm */
    </style>
    <style id="ace_editor.css">
      .ace_br1 {
        border-top-left-radius: 3px;
      }
      .ace_br2 {
        border-top-right-radius: 3px;
      }
      .ace_br3 {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
      .ace_br4 {
        border-bottom-right-radius: 3px;
      }
      .ace_br5 {
        border-top-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .ace_br6 {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .ace_br7 {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .ace_br8 {
        border-bottom-left-radius: 3px;
      }
      .ace_br9 {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br10 {
        border-top-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br11 {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br12 {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br13 {
        border-top-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br14 {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_br15 {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .ace_editor {
        position: relative;
        overflow: hidden;
        padding: 0;
        font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
          'source-code-pro', monospace;
        direction: ltr;
        text-align: left;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      .ace_scroller {
        position: absolute;
        overflow: hidden;
        top: 0;
        bottom: 0;
        background-color: inherit;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: text;
      }
      .ace_content {
        position: absolute;
        box-sizing: border-box;
        min-width: 100%;
        contain: style size layout;
        font-variant-ligatures: no-common-ligatures;
      }
      .ace_dragging .ace_scroller:before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        background: rgba(250, 250, 250, 0.01);
        z-index: 1000;
      }
      .ace_dragging.ace_dark .ace_scroller:before {
        background: rgba(0, 0, 0, 0.01);
      }
      .ace_selecting,
      .ace_selecting * {
        cursor: text !important;
      }
      .ace_gutter {
        position: absolute;
        overflow: hidden;
        width: auto;
        top: 0;
        bottom: 0;
        left: 0;
        cursor: default;
        z-index: 4;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        contain: style size layout;
      }
      .ace_gutter-active-line {
        position: absolute;
        left: 0;
        right: 0;
      }
      .ace_scroller.ace_scroll-left {
        box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;
      }
      .ace_gutter-cell {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding-left: 19px;
        padding-right: 6px;
        background-repeat: no-repeat;
      }
      .ace_gutter-cell.ace_error {
        background-image: url('');
        background-repeat: no-repeat;
        background-position: 2px center;
      }
      .ace_gutter-cell.ace_warning {
        background-image: url('');
        background-position: 2px center;
      }
      .ace_gutter-cell.ace_info {
        background-image: url('');
        background-position: 2px center;
      }
      .ace_dark .ace_gutter-cell.ace_info {
        background-image: url('');
      }
      .ace_scrollbar {
        contain: strict;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 6;
      }
      .ace_scrollbar-inner {
        position: absolute;
        cursor: text;
        left: 0;
        top: 0;
      }
      .ace_scrollbar-v {
        overflow-x: hidden;
        overflow-y: scroll;
        top: 0;
      }
      .ace_scrollbar-h {
        overflow-x: scroll;
        overflow-y: hidden;
        left: 0;
      }
      .ace_print-margin {
        position: absolute;
        height: 100%;
      }
      .ace_text-input {
        position: absolute;
        z-index: 0;
        width: 0.5em;
        height: 1em;
        opacity: 0;
        background: transparent;
        -moz-appearance: none;
        appearance: none;
        border: none;
        resize: none;
        outline: none;
        overflow: hidden;
        font: inherit;
        padding: 0 1px;
        margin: 0 -1px;
        contain: strict;
        -ms-user-select: text;
        -moz-user-select: text;
        -webkit-user-select: text;
        user-select: text;
        white-space: pre !important;
      }
      .ace_text-input.ace_composition {
        background: transparent;
        color: inherit;
        z-index: 1000;
        opacity: 1;
      }
      .ace_composition_placeholder {
        color: transparent;
      }
      .ace_composition_marker {
        border-bottom: 1px solid;
        position: absolute;
        border-radius: 0;
        margin-top: 1px;
      }
      [ace_nocontext='true'] {
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        mask: none !important;
        contain: none !important;
        perspective: none !important;
        mix-blend-mode: initial !important;
        z-index: auto;
      }
      .ace_layer {
        z-index: 1;
        position: absolute;
        overflow: hidden;
        word-wrap: normal;
        white-space: pre;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        pointer-events: none;
      }
      .ace_gutter-layer {
        position: relative;
        width: auto;
        text-align: right;
        pointer-events: auto;
        height: 1000000px;
        contain: style size layout;
      }
      .ace_text-layer {
        font: inherit !important;
        position: absolute;
        height: 1000000px;
        width: 1000000px;
        contain: style size layout;
      }
      .ace_text-layer > .ace_line,
      .ace_text-layer > .ace_line_group {
        contain: style size layout;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
      .ace_hidpi .ace_text-layer,
      .ace_hidpi .ace_gutter-layer,
      .ace_hidpi .ace_content,
      .ace_hidpi .ace_gutter {
        contain: strict;
        will-change: transform;
      }
      .ace_hidpi .ace_text-layer > .ace_line,
      .ace_hidpi .ace_text-layer > .ace_line_group {
        contain: strict;
      }
      .ace_cjk {
        display: inline-block;
        text-align: center;
      }
      .ace_cursor-layer {
        z-index: 4;
      }
      .ace_cursor {
        z-index: 4;
        position: absolute;
        box-sizing: border-box;
        border-left: 2px solid;
        transform: translatez(0);
      }
      .ace_multiselect .ace_cursor {
        border-left-width: 1px;
      }
      .ace_slim-cursors .ace_cursor {
        border-left-width: 1px;
      }
      .ace_overwrite-cursors .ace_cursor {
        border-left-width: 0;
        border-bottom: 1px solid;
      }
      .ace_hidden-cursors .ace_cursor {
        opacity: 0.2;
      }
      .ace_hasPlaceholder .ace_hidden-cursors .ace_cursor {
        opacity: 0;
      }
      .ace_smooth-blinking .ace_cursor {
        transition: opacity 0.18s;
      }
      .ace_animate-blinking .ace_cursor {
        animation-duration: 1000ms;
        animation-timing-function: step-end;
        animation-name: blink-ace-animate;
        animation-iteration-count: infinite;
      }
      .ace_animate-blinking.ace_smooth-blinking .ace_cursor {
        animation-duration: 1000ms;
        animation-timing-function: ease-in-out;
        animation-name: blink-ace-animate-smooth;
      }
      @keyframes blink-ace-animate {
        from,
        to {
          opacity: 1;
        }
        60% {
          opacity: 0;
        }
      }
      @keyframes blink-ace-animate-smooth {
        from,
        to {
          opacity: 1;
        }
        45% {
          opacity: 1;
        }
        60% {
          opacity: 0;
        }
        85% {
          opacity: 0;
        }
      }
      .ace_marker-layer .ace_step,
      .ace_marker-layer .ace_stack {
        position: absolute;
        z-index: 3;
      }
      .ace_marker-layer .ace_selection {
        position: absolute;
        z-index: 5;
      }
      .ace_marker-layer .ace_bracket {
        position: absolute;
        z-index: 6;
      }
      .ace_marker-layer .ace_error_bracket {
        position: absolute;
        border-bottom: 1px solid #de5555;
        border-radius: 0;
      }
      .ace_marker-layer .ace_active-line {
        position: absolute;
        z-index: 2;
      }
      .ace_marker-layer .ace_selected-word {
        position: absolute;
        z-index: 4;
        box-sizing: border-box;
      }
      .ace_line .ace_fold {
        box-sizing: border-box;
        display: inline-block;
        height: 11px;
        margin-top: -2px;
        vertical-align: middle;
        background-image: url(''),
          url('');
        background-repeat: no-repeat, repeat-x;
        background-position: center center, top left;
        color: transparent;
        border: 1px solid black;
        border-radius: 2px;
        cursor: pointer;
        pointer-events: auto;
      }
      .ace_dark .ace_fold {
      }
      .ace_fold:hover {
        background-image: url(''),
          url('');
      }
      .ace_tooltip {
        background-color: #fff;
        background-image: linear-gradient(
          to bottom,
          transparent,
          rgba(0, 0, 0, 0.1)
        );
        border: 1px solid gray;
        border-radius: 1px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        color: black;
        max-width: 100%;
        padding: 3px 4px;
        position: fixed;
        z-index: 999999;
        box-sizing: border-box;
        cursor: default;
        white-space: pre;
        word-wrap: break-word;
        line-height: normal;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        pointer-events: none;
      }
      .ace_folding-enabled > .ace_gutter-cell {
        padding-right: 13px;
      }
      .ace_fold-widget {
        box-sizing: border-box;
        margin: 0 -12px 0 1px;
        display: none;
        width: 11px;
        vertical-align: top;
        background-image: url('');
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 3px;
        border: 1px solid transparent;
        cursor: pointer;
      }
      .ace_folding-enabled .ace_fold-widget {
        display: inline-block;
      }
      .ace_fold-widget.ace_end {
        background-image: url('');
      }
      .ace_fold-widget.ace_closed {
        background-image: url('');
      }
      .ace_fold-widget:hover {
        border: 1px solid rgba(0, 0, 0, 0.3);
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
      }
      .ace_fold-widget:active {
        border: 1px solid rgba(0, 0, 0, 0.4);
        background-color: rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
      }
      .ace_dark .ace_fold-widget {
        background-image: url('');
      }
      .ace_dark .ace_fold-widget.ace_end {
        background-image: url('');
      }
      .ace_dark .ace_fold-widget.ace_closed {
        background-image: url('');
      }
      .ace_dark .ace_fold-widget:hover {
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
        background-color: rgba(255, 255, 255, 0.1);
      }
      .ace_dark .ace_fold-widget:active {
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
      }
      .ace_inline_button {
        border: 1px solid lightgray;
        display: inline-block;
        margin: -1px 8px;
        padding: 0 5px;
        pointer-events: auto;
        cursor: pointer;
      }
      .ace_inline_button:hover {
        border-color: gray;
        background: rgba(200, 200, 200, 0.2);
        display: inline-block;
        pointer-events: auto;
      }
      .ace_fold-widget.ace_invalid {
        background-color: #ffb4b4;
        border-color: #de5555;
      }
      .ace_fade-fold-widgets .ace_fold-widget {
        transition: opacity 0.4s ease 0.05s;
        opacity: 0;
      }
      .ace_fade-fold-widgets:hover .ace_fold-widget {
        transition: opacity 0.05s ease 0.05s;
        opacity: 1;
      }
      .ace_underline {
        text-decoration: underline;
      }
      .ace_bold {
        font-weight: bold;
      }
      .ace_nobold .ace_bold {
        font-weight: normal;
      }
      .ace_italic {
        font-style: italic;
      }
      .ace_error-marker {
        background-color: rgba(255, 0, 0, 0.2);
        position: absolute;
        z-index: 9;
      }
      .ace_highlight-marker {
        background-color: rgba(255, 255, 0, 0.2);
        position: absolute;
        z-index: 8;
      }
      .ace_mobile-menu {
        position: absolute;
        line-height: 1.5;
        border-radius: 4px;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        background: white;
        box-shadow: 1px 3px 2px grey;
        border: 1px solid #dcdcdc;
        color: black;
      }
      .ace_dark > .ace_mobile-menu {
        background: #333;
        color: #ccc;
        box-shadow: 1px 3px 2px grey;
        border: 1px solid #444;
      }
      .ace_mobile-button {
        padding: 2px;
        cursor: pointer;
        overflow: hidden;
      }
      .ace_mobile-button:hover {
        background-color: #eee;
        opacity: 1;
      }
      .ace_mobile-button:active {
        background-color: #ddd;
      }
      .ace_placeholder {
        font-family: arial;
        transform: scale(0.9);
        transform-origin: left;
        white-space: pre;
        opacity: 0.7;
        margin: 0 10px;
      }
      /*# sourceURL=ace/css/ace_editor.css */
    </style>
    <meta charset="utf-8" />
    <title>web2202留言板</title>
    <link rel="stylesheet" media="screen" href="css/login.css" />
  </head>
  <body>
    <!-- particles.js container -->
    <div
      id="particles-js"
      style="display: flex; align-items: center; justify-content: center"
    >
      <canvas
        class="particles-js-canvas-el"
        width="3456"
        height="384"
        style="width: 100%; height: 100%"
      ></canvas>
    </div>
    <div class="apTitle">web2202留言板 注册用户</div>
    <div class="logcon">
      <input type="text" placeholder="用户名" id="username" />
      <p></p>
      <input type="password" placeholder="密码" id="pwd" />
      <p></p>
      <input
        type="text"
        placeholder="头像"
        value="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F26%2F20211126105820_273b6.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658995037&t=1b0372621b1e4144727b586493835f23"
        id="avator"
      />
      <div style="width: 200px; margin: auto">
        性别：
        <label for="man"> 男 </label>
        <input
          type="radio"
          name="sex"
          checked
          value="1"
          id="man"
          style="width: 20px"
        />
        <label for="woman"> 女 </label>
        <input type="radio" name="sex" value="2" id="woman" />
      </div>

      <p></p>
      <button type="button" id="register">注册</button>
    </div>

    <!-- scripts -->
    <script src="js/login.js"></script>
    <script src="js/loginApp.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $(function () {
        $('#register').click(register)
      })
      //注册
      function register() {
        var username = $('#username').val(),
          pwd = $('#pwd').val(),
          avator = $('#avator').val(),
          sex = $("[name='sex']:checked").val()
        if (!username || !pwd || !avator || !sex) {
          alert('注册信息不完整')
          return
        }
        $.ajax({
          url: '/lyb/register.php',
          type: 'post',
          dataType: 'json',
          data: {
            username: username,
            pwd: pwd,
            avator: avator,
            sex: sex,
          },
          success: function (res) {
            if (res.code == 200 && res.msg == '注册 成功') {
              alert('注册成功')
              location.href = '/lyb/login.html'
            } else {
              alert(res.msg)
            }
          },
        })
      }
    </script>
  </body>
</html>
